<template>
  <div class="bar" :id="propses.id"></div>
</template>
  <script lang='ts' setup>
// 引入图表库
import * as echarts from "echarts";
import { onMounted } from "vue";
type EChartsOption = echarts.EChartsOption;
const propses = defineProps({
  id: {
    type: String, //类型字符串
    default: "",
  },

  data: {
    type: Array, //类型数组
    default: [],
  },
  dataX: {
    type: Array, //类型数组
    default: [],
  },
  xName: {
    type: String,
    default: ""
  },
  yName: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: ""
  }
});

const clickIsDis = (id, data, dataX, xName, yName, title) => {
  /**************设备概览图表start********************/
  var chartDom = document.getElementById(id)!;
  setTimeout(() => {
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
      title: {
        text: title
      },
      grid: {
        left: "6%",
        // right: "7%",
        // top: "15%",
        bottom: "16%",
      },
      xAxis: {
        name: xName,
        data: dataX,
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,0.7)",
        borderColor: "rgba(0,0,0,0.7)",
        textStyle: {
          color: "rgba(255, 255, 255, .9)",
        },
        axisPointer: {
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (parms) {
          var str =
            parms[0].marker + parms[0].axisValue + "：" + parms[0].value + "次";
          return str;
        },
      },
      yAxis: {
        name: yName,
      },
      series: [
        {
          name: "销量",
          type: "bar",
          itemStyle: {
            color: "#376cf7",
          },
          label: {
            show: true,
            // position: ["50%", "20%"],
            color: "#fff",
          },
          data: data,
        },
      ],
    };

    if (dataX.length > 12) {
      option.dataZoom = [{
        // 设置滚动条的隐藏与显示
        show: true,
        // 设置滚动条类型
        type: "slider",
        // // 设置背景颜色
        // backgroundColor: "rgba(216, 216, 216, 1)",
        // // 设置选中范围的填充颜色
        // fillerColor: "rgba(91,143,249,1)",
        // // 设置边框颜色
        // borderColor: "rgba(216, 216, 216, 1)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 5,
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 设置滚动条宽度，相对于盒子宽度
        width: "100%",
        // 设置滚动条高度
        height: 10,
        // 设置滚动条显示位置
        left: "center",
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLock: false,
        // 是否开启刷选功能。你可以按住鼠标左键后框选出选中部分
        brushSelect: false,
        // 控制手柄的尺寸
        // handleSize: 1,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 3,
        moveHandleStyle: {
          color: "rgba(216, 216, 216, 1)",
        }
      }]
    }

    option && myChart.setOption(option);
    console.log(JSON.stringify(option))
    /**************设备概览图表end********************/
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }, 200);
};
onMounted(() => {
  clickIsDis(propses.id, propses.data, propses.dataX, propses.xName, propses.yName, propses.title);
});
defineExpose({ clickIsDis });
</script>
  <style scoped>
.bar {
  margin-top: 20px;
  background: #f6f7f9;
  width: 100%;
  border-radius: 12px;
  height: 294px;
  margin-bottom: 20px;
}
</style>